<template>
  <div>
    <a-modal
      :visible="visible"
      :title="'旅差费报销单'"
      :maskClosable="false"
      :closable="true"
      :destroyOnClose="true"
      width="100%"
      :dialog-style="{ margin: '0 auto' }"
      wrapClassName="travelReimbursementForm-modal-Lu"
      @cancel="visible = false">
      <div style="width: 70%;margin: 0 auto;">
        <a-button v-print="printObj" class="blue-btn">打印</a-button>
        <div id="printTest" v-if="visible" class="travelReimbursementForm-print-box">
          <h1 class="letterSpan">旅差费报销单</h1>
            <div class="travelReimbursementForm-print-title-box" style="padding: 0 40px;">
              <span>
                <span class="Title">部门</span>{{ '中心食化科' }}
              </span>
              <span>
                <span class="Title">填报日期</span>
                {{ '2023' }} <span class="Title">年</span>
                {{ '12' }} <span class="Title">月</span>
                {{ '15'}}<span class="Title">日</span>
              </span>
              <span>
                <span class="Title">第</span> {{ '1' }} <span class="Title">页共</span> {{ '1' }} <span class="Title">页</span>
              </span>
            </div>
          <table border="1" cellspacing="0" class="travelReimbursementForm-table" :key="tableKey">
            <tr>
              <td colspan="2" class="Title">出差<br/>时间</td>
              <td colspan="10">
                <div style="display: flex;justify-content: space-around;align-items: center;">
                  <span>
                    <span class="Title">自</span>
                    {{ '2023' }}<span class="Title">年</span>
                    {{ '12' }}<span class="Title">月</span>
                    {{ '14' }}<span class="Title">日</span>
                    <br/>
                    <span class="Title">至</span>
                    {{ '2023' }}<span class="Title">年</span>
                    {{ '12' }}<span class="Title">月</span>
                    {{ '15' }}<span class="Title">日</span>
                  </span>
                  <span>
                    <span class="Title">共</span>
                    {{ '2' }}
                    <span class="Title">天</span>
                  </span>
                </div>
              </td>
              <td colspan="3" class="Title">姓名</td>
              <td colspan="7" style="padding-left: 5px;">{{ 'aaa,bbb,ccc' }}</td>
              <td colspan="2" class="Title">出差<br/>事由</td>
              <td colspan="8" style="text-align: left;padding-left: 5px !important;">{{ '平展国产普通化妆品各种技术核查业务指导' }}</td>
            </tr>
            <colgroup>
              <col>
              <col>
              <col>
              <col>
              <col>
              <col>
              <col>
              <col>
              <col style="width: 1px !important">
              <col>
              <col>
              <col>
              <col>
              <col style="width: 1px !important">
              <col>
              <col>
              <col>
              <col>
              <col>
              <col>
              <col style="width: 1px !important">
              <col>
              <col>
              <col>
              <col>
              <col>
              <col>
              <col style="width: 1px !important">
              <col>
              <col>
              <col>
              <col>
            </colgroup>
            <tr>
              <td colspan="8" class="Title letterSpan">起讫时间及地点</td>
              <td rowspan="4"></td>
              <td colspan="4" class="Title letterSpan">车船票</td>
              <td rowspan="4"></td>
              <td colspan="6" class="Title letterSpan">出差补助费</td>
              <td rowspan="4"></td>
              <td colspan="6" class="Title letterSpan">住宿费</td>
              <td rowspan="4"></td>
              <td colspan="4" class="Title letterSpan">其他</td>
            </tr>
            <tr>
              <td class="Title">月</td>
              <td class="Title">日</td>
              <td colspan="2" class="Title">起</td>
              <td class="Title">月</td>
              <td class="Title">日</td>
              <td colspan="2" class="Title">讫</td>
              <!--  -->
              <td colspan="2" class="Title">类别</td>
              <td colspan="2" class="Title">金额</td>
              <!--  -->
              <td colspan="2" class="Title">天数</td>
              <td colspan="2" class="Title">标准</td>
              <td colspan="2" class="Title">金额</td>
              <!--  -->
              <td colspan="2" class="Title">天数</td>
              <td colspan="2" class="Title">标准</td>
              <td colspan="2" class="Title">金额</td>
              <!--  -->
              <td colspan="2" class="Title">摘要</td>
              <td colspan="2" class="Title">金额</td>
            </tr>
            <tr>
              <td>{{ '12' }}</td>
              <td>{{ '14' }}</td>
              <td colspan="2">{{ '南宁' }}</td>
              <td>{{ '12' }}</td>
              <td>{{ '14' }}</td>
              <td colspan="2">{{ '崇左' }}</td>
              <td colspan="2">{{ '高铁' }}</td>
              <td colspan="2">{{ '210' }}</td>
              <td colspan="2">{{ '2' }}</td>
              <td colspan="2">{{ '100' }}</td>
              <td colspan="2">{{ '600' }}</td>
              <td colspan="2">{{ '1' }}</td>
              <td colspan="2">{{ '258' }}</td>
              <td colspan="2">{{ '774' }}</td>
              <td colspan="2">{{ '车补' }}</td>
              <td colspan="2">{{ '480' }}</td>
            </tr>
            <tr>
              <td colspan="8" class="Title">小计</td>
              <td colspan="2"></td>
              <td colspan="2">{{ '420' }}</td>
              <td colspan="2"></td>
              <td colspan="2"></td>
              <td colspan="2">{{ '600' }}</td>
              <td colspan="2"></td>
              <td colspan="2"></td>
              <td colspan="2">{{ '774' }}</td>
              <td colspan="2"></td>
              <td colspan="2">{{ '480' }}</td>
            </tr>
            <tr>
              <td colspan="5" class="Title">总计金额(大写)</td>
              <td colspan="17">
                {{ 'x' }} <span class="Title">万</span>
                {{ '贰' }} <span class="Title">仟</span>
                {{ '贰' }} <span class="Title">佰</span>
                {{ '柒' }} <span class="Title">拾</span>
                {{ '肆' }} <span class="Title">元</span>
                {{ '零' }} <span class="Title">角</span>
                {{ '零' }} <span class="Title">分</span>
              </td>
              <td colspan="10" style="text-align: left;padding-left: 10px !important;">
                <span class="Title">核销￥</span>{{ '2274' }}
              </td>
            </tr>
            <tr>
              <td colspan="32">
                <div class="travelReimbursementForm-print-title-box" style="padding-right: 100px;">
                  <span>
                    <span class="Title">公务卡￥</span>{{ '774' }}
                  </span>
                  <span>
                    <span class="Title">转账￥</span>{{  }}
                  </span>
                  <span>
                    <span class="Title">储蓄卡￥</span>{{ '1500' }}
                  </span>
                </div>
              </td>
            </tr>
          </table>
          <div class="travelReimbursementForm-print-title-box" style="padding-right: 60px;padding-top: 10px;">
            <span>
              <span class="Title">中心领导</span>{{ 'XXX' }}
            </span>
            <span>
              <span class="Title">审核(会计)</span>{{ 'XXX' }}
            </span>
            <span>
              <span class="Title">部门</span>{{ 'XXX' }}
            </span>
            <span>
              <span class="Title">填报人</span>{{ 'XXX' }}
            </span>
          </div>
        </div>
      </div>
      <template slot="footer">
        <div>
          <a-button @click="visible = false" class="blue-btn">关闭</a-button>
        </div>
      </template>
    </a-modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      visible: false,
      tableKey: '',
      printObj:{
        id:"printTest", //需要打印的id名称
        popTitle:"旅差费报销单",//文档的名称
        // preview:true,//预览功能，不好用
        zIndex:'20002',
        beforeOpenCallback(vue){
            // //console.log('打印回调',vue)
        },
        openCallback (vue) {//打开之前
            // //console.log('打开之前',vue)
        },
        closeCallback (vue) {//关闭了打印工具
            // //console.log('关闭了打印工具')
        },
      },
    }
  },
}
</script>
<style lang="less">
.travelReimbursementForm-print-box {
  font-size: 14px;
  font-family: 宋体;
  color: black;
  h1 {
    text-decoration: underline;
    text-align: center;
    color: #5ca3e5;
  }
  .travelReimbursementForm-table {
    width: 100%;
    text-align: center;
    table-layout: fixed;
    td {
      min-width: 10px;
      padding: 0 !important;
    }
  }
  table {
    border-color: #5ca3e5;
    border-top: 2px solid #5ca3e5;
    border-left: 2px solid #5ca3e5;
    border-right: 2px solid #5ca3e5;
    border-bottom: 2px solid #5ca3e5;
  }
  h1 {
    color: #5ca3e5;
    font-weight: bold;
    letter-spacing: 4px;
    // font-size: 35px;
  }
  .Title {
    color: #5ca3e5;
    // font-weight: bold;
    text-align: center;
  }
  .letterSpan {
    // letter-spacing: 8px;
  }
  .td-rowspan {
    width: 1px !important;
    min-width: 1px !important;
    padding: 1px 0;
  }
  .travelReimbursementForm-print-title-box {
    display: flex;
    justify-content: space-between;
  }
}
</style>
